<template>
	<view class="p-bot150">
		<!-- #ifdef MP-WEIXIN -->
		<navBar tabBar title="会员中心"></navBar>
		<!-- #endif -->

		<view class="Vipoptions">
			<u-tabs :list="pageData" :current="current" :lineColor="Pinia.color" :itemStyle="itemStyle" :lineWidth="24"
				:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :scrollable="false" keyName="vip_content"
				@click="click"></u-tabs>
		</view>

		<view class="rows m-top20" v-if="pageData.length">
			<view class="rows" v-show="current == 0">
				<u-parse :content="pageData[0].content" :domain="imgUrl" @ready="Load = false"></u-parse>
			</view>
			<view class="rows" v-show="current == 1">
				<u-parse :content="pageData[1].content" :domain="imgUrl"></u-parse>
			</view>
		</view>

		<view class="liberal d-flex a-center j-centert white" @click="playVip">
			<view class="d-flex f-column a-center" v-if="is_buy">
				<view class="d-flex a-center white size26">
					<text>立即续费{{liberal_Txt}}</text>
					<text class="h6 m-top4">￥</text>
					<text class="size28">{{liberal_price}}</text>
				</view>
				<text class="white h7 ">有效期至 {{pageData[current].expire_at}}</text>


			</view>
			<block v-else>
				<text class="size34">{{liberal_Txt}}</text>
				<text class="h6 m-top4">￥</text>
				<text class="size34">{{liberal_price}}</text>
			</block>
		</view>

		<Load v-if="Load"></Load>
	</view>
</template>

<script setup>
	import { ref, inject, computed } from 'vue';
	import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app';
	import { usePiniaStore } from '@/store/pinia.js';
	import Http from '@/common/request.js';
	const { getPayment } = inject('common');
	const Pinia = usePiniaStore();
	const { imgUrl, Toast } = inject('config');
	const Load = ref(true);
	const list1 = ref([{
		name: '月卡会员',
	}, {
		name: '年卡会员',
	}]);
	const current = ref(0);
	const itemStyle = ref({ height: '36px' });
	const activeStyle = ref({
		fontWeight: 'bold',
		fontSize: '30rpx',
		transform: 'scale(1.04)',
		color: Pinia.color
	});
	const inactiveStyle = ref({
		transform: 'scale(1)',
		fontSize: '30rpx',
	});
	const pageData = ref([]);
	const palyState = ref(true);

	onLoad(() => {
		buyVipList();
	})

	const buyVipList = () => {
		Http.get({
			url: '/goodsLessonsApi/buyVipList',
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
			pageData.value = res.data;
		})
	}


	const playVip = () => {
		if (!palyState.value) return;
		palyState.value = false;
		Http.get({
			url: '/accountPay/getVipPayInfo',
			data: {
				vip_id: pageData.value[current.value].vip_id
			}
		}).then(res => {
			if (res.code != '100') return palyState.value = true;
			const result = res.data;
			getPayment(result).then(pay => {
				buyVipList();
			})
			palyState.value = true
		})
	}

	const click = (e) => current.value = e.index


	const liberal_Txt = computed(() => {
		if (!pageData.value.length) return;
		return `${pageData.value[current.value].vip_content}：`;
	})

	const liberal_price = computed(() => {
		if (!pageData.value.length) return;
		return `${pageData.value[current.value].vip_price}`;
	})

	const is_buy = computed(() => {
		if (!pageData.value.length) return;
		return pageData.value[current.value].is_buy == 1 ? true : false;
	})

	onShareAppMessage(() => {
		let share = Pinia.share;
		return {
			title: share.title,
			desc: share.desc,
			path: `/pages/startUp/startUp?share_v_id=${Pinia.vid}`,
			imageUrl: share.imageUrl
		}
	})
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.Vipoptions {
		width: 400rpx;
		margin: 0 auto;
		height: 80rpx;
	}

	.liberal {
		color: #ffffff;
		width: 600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		overflow: hidden;
		background-color: $themeColor;
		position: fixed;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 100;
	}

	// #ifdef MP-WEIXIN
	.liberal {
		bottom: 40rpx;
	}

	// #endif
	// #ifdef H5
	.liberal {
		bottom: 140rpx;
	}

	// #endif
</style>